<template>
  <div class="widget-container">
    <draggable v-if="type==='conf' || type === 1" class="toolbar-drag-1" v-model="widgetData.widgets" :options="{group:'item'}">
      <widget v-for="(widget,index) of widgetData.widgets" :key="widget.code+index" :widget="widget" @done="confDone"></widget>
    </draggable>
    <draggable v-if="type==='page' || type === 2" class="toolbar-drag-2" v-model="widgetData.widgets" :options="{group:'item'}">
      <page-widget  v-for="(widget,index) of widgetData.widgets" :key="widget.code+index" :reportData="reportData" :widget="widget" @done="confDone"></page-widget>
    </draggable>
  </div>
</template>

<script>
  import draggable from 'vuedraggable'
  import Widget from "./conf/widget"
  import PageWidget from "./page/widget";

    export default {
      components: {
        PageWidget,
        Widget ,draggable },
      props:['widgetData','type','reportData'],
      name: "widget-ctl",
      data(){
        return {

        }
      },
      created(){
        console.log(this.type,this.widgetData)
      },
      methods: {
        removeEvt(e){
          console.log(e)
        },
        confDone(p){
          this.$emit('done')
        },
      }
    }
</script>

<style lang="scss">
  .toolbar-drag-1{
    min-height:200px;
  }
  .toolbar-drag-2{
    height:1188px;
  }
</style>
